<template>
  <div id="webssh">
    <!-- 页面标题 -->
    <h1 class="text-2xl font-bold mb-4">远程终端</h1>

    <!-- 主机选择下拉框 -->
    <el-select v-model="selectedHost" placeholder="选择主机" @focus="fetchHostData" class="mb-4 w-full">
      <!-- 动态渲染主机列表 -->
      <el-option v-for="host in hostData" :key="host.hostIp" :label="host.hostName" :value="host.hostIp" />
    </el-select>

    <!-- 错误提示信息 -->
    <p v-if="error" class="text-red-500">加载主机数据失败，请稍后再试。</p>

    <!-- 终端容器 -->
    <div id="terminal" class="terminal-container"></div>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref, watch } from "vue";
import { Terminal } from "xterm";
import { FitAddon } from "xterm-addon-fit";
import "xterm/css/xterm.css";
import { getHostInfo } from '@/api/host';

// WebSocket 连接地址模板
const wsUrl = "ws://localhost:8765/simple/ws?hostIp=";

// 定义 refs，用于管理 xterm 终端和 WebSocket
const terminal = ref(null); // xterm 实例
const socket = ref(null); // WebSocket 实例

// 初始化 WebSocket 连接
const initWebSocket = (hostIp) => {
  // 如果已有 WebSocket 连接，先关闭
  if (socket.value) {
    socket.value.close();
  }

  // 创建新的 WebSocket 连接
  socket.value = new WebSocket(wsUrl + hostIp);

  // WebSocket 打开事件：连接成功
  socket.value.onopen = () => {
    console.log("WebSocket connected.");
    terminal.value?.write("\r\nConnection established.\r\n");
  };

  // WebSocket 消息事件：收到后端数据
  socket.value.onmessage = (event) => {
    console.log("Received message:", event.data);
    terminal.value?.write(event.data); // 显示到终端
  };

  // WebSocket 关闭事件：断开连接
  socket.value.onclose = () => {
    console.log("WebSocket closed.");
    terminal.value?.write("\r\nConnection closed...\r\n");
  };

  // WebSocket 错误事件
  socket.value.onerror = (error) => {
    console.error("WebSocket error:", error);
    terminal.value?.write("\r\nWebSocket error occurred.\r\n");
  };
};

// 初始化 xterm.js 终端
const initTerminal = () => {
  // 创建 xterm 实例
  const term = new Terminal({
    rows: 40,
    convertEol: true,
    fontSize: 14,
    // fontFamily: "monospace",
    fontFamily: "Fira Code, monospace", // 设置字体
    cursorBlink: true,
    scrollback: 1000,
    theme: {
      background: "#282a36", // 深紫灰色背景
      foreground: "#f8f8f2", // 浅灰色文字
      cursor: "#50fa7b",     // 绿色光标
      black: "#21222c",      // 黑色
      red: "#ff5555",        // 红色
      green: "#50fa7b",      // 绿色
      yellow: "#f1fa8c",     // 黄色
      blue: "#bd93f9",       // 蓝色
      magenta: "#ff79c6",    // 品红色
      cyan: "#8be9fd",       // 青色
      white: "#f8f8f2"       // 白色
    },
  });

  // 加载适配插件，支持终端自动调整大小
  const fitAddon = new FitAddon();
  term.loadAddon(fitAddon);

  // 挂载终端到页面上的容器
  term.open(document.getElementById("terminal"));
  fitAddon.fit(); // 调整终端大小以适应容器

  // 聚焦到终端
  term.focus();

  // 显示初始化消息
  term.write("\r\nWaiting For Connecting to Server...\r\n");

  // 监听用户输入，并将输入通过 WebSocket 发送到后端
  term.onData((data) => {
    if (socket.value && socket.value.readyState === WebSocket.OPEN) {
      socket.value.send(data);
    } else {
      term.write("\r\nWebSocket is not connected.\r\n");
    }
  });

  // 动态调整终端大小
  const onResize = () => fitAddon.fit();
  window.addEventListener("resize", onResize);

  // 组件卸载前清理 resize 事件监听
  onBeforeUnmount(() => {
    window.removeEventListener("resize", onResize);
  });

  // 保存终端实例
  terminal.value = term;
};

// 生命周期钩子：组件挂载时初始化
onMounted(() => {
  initTerminal(); // 初始化终端
});

// 生命周期钩子：组件卸载时清理资源
onBeforeUnmount(() => {
  // 关闭 WebSocket 连接
  if (socket.value) {
    socket.value.close();
  }
  // 销毁终端实例
  if (terminal.value) {
    terminal.value.dispose();
  }
});

// 定义状态变量
const loading = ref(false); // 数据加载状态
const error = ref(null); // 错误信息
const selectedHost = ref(''); // 当前选中的主机
const hostData = ref([]); // 主机列表数据

// 监听主机选择的变化
watch(selectedHost, (newValue) => {
  if (newValue) {
    console.log("Selected host:", newValue);
    initWebSocket(newValue); // 重新初始化 WebSocket
  }
});

// 获取主机列表的方法
const fetchHostData = async () => {
  loading.value = true; // 开始加载
  error.value = null; // 清空错误信息
  try {
    const response = await getHostInfo(); // 调用 API
    hostData.value = response.data.records; // 更新主机列表
  } catch (err) {
    console.error("加载主机数据失败:", err);
    error.value = '加载主机数据失败，请稍后再试。'; // 显示错误信息
  } finally {
    loading.value = false; // 加载完成
  }
};
</script>

<style>
/* 页面整体布局 */
#webssh {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 终端容器样式 */
.terminal-container {
  flex: 1;
  overflow: hidden;
  border: 1px solid #333;
  margin-top: 10px;
}
</style>
